<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>new service</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/frame.css">
    <style>
        th[data-field=id],
        td[data-field=id] {
            display:none;
        }
    </style>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-form layui-form-pane" id="ability-form">

</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs oka-btn-radius" lay-event="del">删除</a>
</script>
<script type="text/html" id="stateTpl">
    {{#  if(d.state == 0){ }}
    <span style="color: #ccc;">关机</span>
    {{#  } else if(d.state == 1) { }}
    <span style="color:#00a65a;">运行</span>
    {{#  } }}
</script>
<div class="layui-form">

    <fieldset class="layui-elem-field site-demo-button" style="margin: 30px 0 0 30px;border:0">

        <div class="layui-form-item" style="margin:0">
            <div class="layui-input-block" style="margin:0">
                <div class="layui-input-inline" style="margin:0;padding:0;width:100px;">
                    <button class="layui-btn layui-btn-sm layui-btn-radius" lay-filter="machine-btn" lay-submit=""  id="machine-btn">新增机器</button>
                </div>

                <label class="layui-form-label" style="width:auto">机器名</label>
                <div class="layui-input-inline" style="width:148px">
                    <input type="text" name="name" id="name" lay-verify="required|name" autocomplete="off"
                           placeholder="机器别名"
                           class="layui-input">
                </div>
                <label class="layui-form-label" style="width:auto">ip地址</label>
                <div class="layui-input-inline" style="width:158px;margin-right:0">
                    <input type="text" name="ipAddress" id="ipAddress"  lay-verify="required|ipAddress" autocomplete="off"
                           placeholder="ip:port"
                           class="layui-input">
                </div>
            </div>
        </div>
    </fieldset>


    <hr class="layui-bg-gray">
    <div class="layui-form-item layui-form-text" style="margin-bottom:0;">


        <div class="layui-input-block" style="margin-left:0;margin-right:0">
            <table class="layui-table"
                   lay-data="{ even:true, skin: 'row',page: { layout: ['prev', 'page', 'next', 'skip','count'] }, id:'machines'}"
                   lay-filter="machines">
                <thead>
                <tr>
                    <th lay-data="{type:'numbers'}"></th>
                    <th lay-data="{field:'id', width:1, minWidth:1}">id</th>
                    <th lay-data="{field:'name', minWidth:'200'}">机器名</th>
                    <th lay-data="{field:'ipAddress', width:180}">IP地址</th>
                    <th lay-data="{field:'usageRate', align:'center',width:160}">资源使用率</th>
                    <th lay-data="{field:'state', align:'center',width:64, templet:'#stateTpl'}">状态</th>
                    <th lay-data="{field:'op', align:'center', width:64, toolbar: '#barDemo'}">操作</th>

                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>


<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'oka', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table
            , oka = layui.oka;
        //alert(location.hash);
        //自定义验证规则
        function getStateText(state) {
            if(state == '0') {
                return '<span style="color: #ccc;">关机</span>';
            } else if(state == '1') {
                return '<span style="color:#00a65a;">运行</span>';
            }
        }
        oka.loading.open();
        table.reload("machines", {
                url: "/admin/machine",
                done: function(d) {
                    oka.loading.close();
                    if(oka.page.timer) {
                        window.clearInterval(oka.page.timer);
                        delete oka.page.timer;
                    }
                    function refresh() {
                        var data = table.cache.machines.slice();
                        for(var i = 0, l = data.length; i < l; i++) {
                            (function(i) {
                                $.ajax({
                                    url: "node/health?ip="+data[i].ipAddress
                                    , type: "GET"
                                    , async: true
                                    , error:function() {
                                        oka.loading.close();
                                        layer.msg('连接异常，请查看console', {
                                            offset: "t",
                                            anim: 6
                                        });

                                    }
                                    , success: function (res) {
                                        oka.table.refresh("machines",i, ["state"],[getStateText(res)]);
                                        data[i].state = res;
                                    }
                                });
                            })(i);

                        }
                    }
                    refresh();
                    oka.page.timer = window.setInterval(refresh, 16000);
                }
            }
        );


        form.verify({
            ipAddress: function (value) {
                if(value.indexOf(":") < 0) {
                    return '请按格式填写（ip:port）';
                }
            }
        });

        form.on('switch(status)', function (data) {
            $("#status").prop("value", this.checked ? 'on' : 'off');
        });
        form.on('switch(isPrivate)', function (data) {
            $("#isPrivate").prop("value", this.checked ? true : false);
        });
        //监听提交


        table.on('tool(machines)', function (obj) {

            var data = obj.data;
            if (obj.event === 'del') {

                layer.confirm('确认要删除机器配置？', function (index) {
                    oka.loading.open();
                    $.ajax({
                        url: "/admin/machine/" + data.id
                        , type: "DELETE"
                        , async: true
                        , success: function (res) {
                            oka.loading.close();
                            if (res.code == "0") {
                                layer.msg('操作失败!!！', {
                                    offset: "t",
                                    anim: 6
                                });

                            } else {
                                layer.msg('操作成功',{
                                    time:600
                                });
                                obj.del();
                                layer.close(index);
                            }
                            obj = null;

                        }
                    });
                });
            }

        });
        form.on('submit(machine-btn)', function (data) {
            oka.loading.open();
            $.ajax({
                url: "/admin/machine"
                , type: "POST"
                , contentType: "application/json"
                , async: true
                , data: JSON.stringify(data.field)
                , success: function (res) {
                    oka.loading.close();
                    if (res.code == "0") {
                        layer.msg('操作失败!!！', {
                            offset: "t",
                            anim: 6
                        });

                    } else {
                        layer.msg('操作成功',{
                            time:600
                        });
                        var d = table.cache.machines.slice();
                        d.push(data.field);

                        table.reload("machines", {
                            data: d
                        })
                    }

                }
            });

            return false;
        });


    });
</script>

</body>
</html>